<template>
  <ele-page
    :multi-card="false"
    flex-table
    hide-footer
    style="min-height: 420px"
  >
    <ele-card :body-style="{ padding: 0 }" flex-table>
      <div style="padding: 8px 16px">
        <file-toolbar
          v-model:grid="grid"
          :selections="selections"
          :parent_id="parent_id"
          @done="handleDone"
        />
        <file-header
          :total="total"
          :directorys="directorys"
          @update:directorys="updateDirectorys"
        />
      </div>
      <ele-loading
        :loading="loading"
        style="height: calc(100vh - 303px); overflow: auto"
      >
        <ele-card :body-style="{ padding: 0 }" flex-table>
          <file-list
            :grid="grid"
            :data="data"
            :sort="sort"
            :order="order"
            :total="total"
            :parent_id="parent_id"
            v-model:selections="selections"
            @sort-change="handleSortChange"
            @go-directory="handleGoDirectory"
            @done="handleDone"
          />
        </ele-card>
      </ele-loading>

      <ElePagination
        size="small"
        :teleported="false"
        :pageSizes="[18, 24, 30, 36, 42]"
        layout="total,prev,pager,next,sizes"
        v-bind="paginationProps || {}"
        :currentPage="currentPage"
        :pageSize="pageSize"
        :total="total"
        @update:currentPage="handleCurrentPageChange"
        @update:pageSize="handlePageSizeChange"
      />
    </ele-card>
  </ele-page>
</template>

<script setup>
import { ref } from "vue";
import { EleMessage } from "ele-admin-plus/es";
import FileToolbar from "./components/file-toolbar.vue";
import FileHeader from "./components/file-header.vue";
import FileList from "./components/file-list.vue";
import { pageFiles } from "@/api/system/file";

defineOptions({ name: "ExtensionFile" });

/** 加载状态 */
const loading = ref(true);

/** 文件列表数据 */
const data = ref([]);

/** 排序字段 */
const sort = ref("");

/** 排序方式 */
const order = ref("");

/** 选中数据 */
const selections = ref([]);

/** 文件夹数据 */
const directorys = ref([]);

/** 总文件数 */
const total = ref(0);

/** 是否网格展示 */
const grid = ref(true);

/** 父级id */
const parent_id = ref(0);

/** 当前页码 */
const currentPage = ref(1);

const paginationProps = ref({});

/** 每页显示数量 */
const pageSize = ref(24);

/** 查询文件列表 */
const query = () => {
  data.value = [];
  selections.value = [];
  loading.value = true;
  pageFiles({
    sort: order.value ? sort.value : "",
    order: order.value,
    parent_id: parent_id.value,
    page: currentPage.value,
    limit: pageSize.value,
  })
    .then((list) => {
      loading.value = false;
      if (!list?.data?.length && list?.count) {
        const maxPage = Math.ceil(list.count / pageSize.value);
        if (maxPage && currentPage.value > maxPage) {
          query({ page: maxPage });
          return;
        }
      }
      data.value = list.data.map((d) => {
        return Object.assign(d, {
          key: d.id,
          isDirectory: d.is_directory === 1 ? true : false,
          length: formatLength(d.length),
        });
      });
      total.value = list.count;
    })
    .catch((e) => {
      loading.value = false;
      EleMessage.error(e.message);
    });
};

/** 刷新列表数据 */
const handleDone = () => {
  query();
};

/** 文件列表排序方式改变 */
const handleSortChange = (option) => {
  order.value = option.order ?? "";
  sort.value = option.sort;
  query();
};

/** 进入文件夹 */
const handleGoDirectory = (item) => {
  updateDirectorys([...directorys.value, item]);
};

/** 更新文件夹数据 */
const updateDirectorys = (values) => {
  directorys.value = values;
  parent_id.value = directorys.value[directorys.value.length - 1]?.id ?? 0;
  query();
};

/** 切换当前页码 */
const handleCurrentPageChange = (page) => {
  if (currentPage.value !== page) {
    currentPage.value = page;
    query();
  }
};

/** 切换每页显示数量 */
const handlePageSizeChange = (limit) => {
  if (pageSize.value !== limit) {
    currentPage.value = 1;
    pageSize.value = limit;
    const maxPage = Math.ceil(total.value / limit);
    if (maxPage && currentPage.value > maxPage) {
      currentPage.value = maxPage;
    }
    query();
  }
};
/** 格式化文件大小 */
const formatLength = (length) => {
  if (length == null) {
    return "-";
  }
  if (length < 1024) {
    return length + "B";
  } else if (length < 1024 * 1024) {
    return (length / 1024).toFixed(1) + "KB";
  } else if (length < 1024 * 1024 * 1024) {
    return (length / 1024 / 1024).toFixed(1) + "M";
  } else {
    return (length / 1024 / 1024 / 1024).toFixed(1) + "G";
  }
};

query();
</script>
